import React from "react";
import Title from "../components/Title";
import SDTable from "../dataManage/SDTable";
import api from "../../api";
import { render } from "@testing-library/react";
import { companyMap, companyMap2 } from "../components/common";
import { Button, Form, Modal, Input, Col, Row, Select, InputNumber, message } from "antd";
import useReducer from "src/hooks/useReducer";
//import './index.scss'
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
export default function ClxxManage() {
    const formRef = React.useRef();
    const actionRef = React.useRef();
    const [form] = Form.useForm();

    const [sate, dispatch] = useReducer({
        visible: false, // 抽屉弹窗
        editId: "", // 编辑id
        title: "", // 抽屉标题
    });
    const { visible, editId, title } = sate;

    const columns = [
        {
            title: "车牌号",
            dataIndex: "licensePlate",
            width: 150,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: "车型",
            dataIndex: "model",
            width: 150,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: "容量",
            dataIndex: "capacity",
            width: 150,
            ellipsis: true,
        },

        {
            title: "司机姓名",
            dataIndex: "driverName",
            width: 150,
            ellipsis: true,
        },
        {
            title: "司机电话",
            dataIndex: "driverPhone",
            width: 150,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: "司机驾照号码",
            dataIndex: "licenseNumber",
            width: 150,
            ellipsis: true,
            hideInSearch: true,
        },
        {
            title: "所属公司",
            dataIndex: "companyId",
            width: 80,
            ellipsis: true,
            hideInSearch: true,
            render: (text, record) => {
                return companyMap[record.companyId];
            },
        },

    ];

    // 新增
    const handleAdd = () => {
        form.resetFields();
        dispatch({
            visible: true,
            editId: "",
            title: "新增",
        });
    };

    // 编辑
    const handleEdit = (record) => {
        form.setFieldsValue({
            ...record,
            companyId: companyMap[record.companyId],
        });
        dispatch({
            visible: true,
            editId: record.busId,
            title: "编辑",
        });
    };


    //保存
    const save = () => {
        form.validateFields().then((values) => {
            const params = {
                ...values,

            }
            editId && (params.busId = editId);

            // 如果是新增， 那么userCreate 就是设置当前时间

            params.companyId = companyMap2[params.companyId] || 0;


            const remote = editId ? api.editClxx : api.addClxx;

            remote(params).then((res) => {
                    if (res.success) {
                        dispatch({ visible: false });
                        actionRef.current.reload();
                        message.success("操作成功");
                    }else {
                        message.error(res.message || "操作失败");
                    }
                }
            );
        });
    }
    // 保存
    const save1 = () => {
        form.validateFields().then((values) => {
            const params = {
                ...values,
            }
            editId && (params.busId = editId);

            // 如果是新增， 那么userCreate 就是设置当前时间

            params.companyId = companyMap2[params.companyId] || 0;

            // 新增处理里程的部分
            const remoteForMileage = api.addMileage(params.mileage);

            const remote = editId? api.editClxx : api.addClxx;

            remote(params).then((res) => {
                if (res.success) {
                    dispatch({ visible: false });
                    actionRef.current.reload();
                    message.success("操作成功");
                }else {
                    message.error(res.message || "操作失败");
                }
            });
        });
    }
    return (
        <div className="style2">
            <div style={{ padding: "0 100px" }}>
                <Title title={"车辆详情"}></Title>
                <SDTable
                    formRef={formRef}
                    actionRef={actionRef}
                    requestApi={api.clxx}
                    columns={columns}
                    options={false}
                    toolBarRender={() => [

                    ]}
                    //   search={false}
                ></SDTable>
                <Modal
                    visible={visible}
                    title={`${title}车辆信息`}
                    width={900}
                    onCancel={() => dispatch({ visible: false })}
                    footer={[

                    ]}
                >
                    <Form form={form}>
                        <Form form={form} {...layout}>
                            <Row gutter={24}>
                                <Col span={12}>
                                    <Form.Item
                                        name="licensePlate"
                                        label="车牌号"
                                        rules={[
                                            {
                                                required: true,
                                                message: "车牌号不能为空",
                                            },
                                        ]}
                                    >
                                        <Input />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        name="model"
                                        label="车型"

                                    >
                                        <Input  />
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row gutter={24}>
                                <Col span={12}>
                                    <Form.Item
                                        name="capacity"
                                        label="容量"

                                    >
                                        <Input  />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        name="driverName"
                                        label="司机姓名"

                                    >
                                        <Input allowClear />
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row gutter={24}>
                                <Col span={12}>
                                    <Form.Item
                                        name="driverPhone"
                                        label="司机电话"

                                    >
                                        <Input allowClear />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        name="licenseNumber"
                                        label="司机驾照号码"

                                    >
                                        <Input allowClear />
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row gutter={24}>
                                <Col span={12}>
                                    <Form.Item
                                    name="companyId"
                                    label="所属公司"

                                    >
                                        <Input allowClear />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        name="kilometers"
                                        label="里程"

                                    >
                                        <Input allowClear />
                                    </Form.Item>
                                </Col>
                            </Row>
                            <Row gutter={24}>
                                <Col span={12}>
                                    <Form.Item
                                        name="history"
                                        label="事故历史"

                                    >
                                        <Input allowClear />
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item
                                        name="color"
                                        label="车辆颜色"

                                    >
                                        <Input allowClear />
                                    </Form.Item>
                                </Col>
                            </Row>
                        </Form>
                    </Form>
                </Modal>
            </div>
        </div>
    );
}
